<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ page language="java" contentType="text/html;  charset=utf-8"
	pageEncoding="utf-8"%>
<% pageContext.setAttribute("newLineChar", "\n"); %>
<!DOCTYPE html>
<html lang="ko">
	<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    
    <title>Faeple on ${member.name}(${member.id})</title>
    <!--[if lt IE 9]>
    	<script type="text/javascript" src="/resources/js/html5shiv.js"></script>
		<script type="text/javascript" src="/resources/js/respond.min.js"></script>
		<link rel='stylesheet' href='/resources/css/layout/memberView_pc.css' />
    <![endif]-->
    <!--[if lt IE 10]>
    	<script src="/resources/js/placeholders.min.js"></script>
    <![endif]-->
	<link rel="stylesheet" type="text/css" href="/resources/fancyBox/source/jquery.fancybox.css?v=2.1.5" media="screen" />
	<link rel="stylesheet" href="/resources/css/jquery.minicolors.css">
	<link rel="stylesheet" href="/resources/css/layout/memberView_pc.css?20141024" />
    <style type="text/css">
  		#print_website a{
			color : ${member.layoutColor};
		}
		#print_website{
			color : ${member.layoutColor};
		}
		.profile-nav li:focus,
		.profile-nav li:hover{
			border-bottom: 4px solid ${member.layoutColor};
		}
		.profile-value{
			color: ${member.layoutColor};
		}
		.profile-nav .active{
			border-bottom: 4px solid ${member.layoutColor};
		}
		.share-list > li{
			padding: 0;
		}
		.coverImageWrapper{
			background-color: ${member.layoutColor};
		}
    </style>
</head>

<body>
<div id="viewport">
<div id="page">
<!-- header -->
	<jsp:include page = "head.jsp" flush="false"/>
<!-- header -->
<div class="dropdown mobile-more-btn">
<a data-target="#" href="#" data-toggle="dropdown" style="padding: 7px 12px; font-size: 18px; color: #888; display: block;"><i class="fa fa-ellipsis-v"></i></a>
<ul class="dropdown-menu" style="border-color: #ddd; z-index: 1010; right: 0; left:inherit; min-width: 160px;">
	<c:if test="${follow ne 'me'}">
		<li><a href="javascript:loadMessage();" title="<spring:message code="head.message"/>"><i class="fa fa-envelope-o"></i><spring:message code="head.message"/></a></li>
	</c:if>
	<li><a href="#" data-toggle="modal" data-target="#page-share-modal" title="<spring:message code="common.share"/>"><i class="fa fa-share-square-o"></i><spring:message code="common.share"/></a></li>
	<c:if test="${follow eq 'me'}">
		<li><a href="/settings#profile" title="<spring:message code="profile.edit"/>"><i class="fa fa-cog"></i><spring:message code="profile.edit"/></a></li>
	</c:if>
</ul>
</div>
<form id="update-form" method="post" enctype="multipart/form-data" action="/profileUpdate">
	<div class="container" style="padding:0;">
		<div class="coverImageWrapper">
			<c:choose>
			<c:when test="${member.coverImage ne null && member.coverImage ne ''}"><img id="coverImage" style="position: absolute; width: 100%; height: auto;" src="/resources/upload/cover/${member.coverImage}"></c:when>
			<c:otherwise><img id="coverImage" style="position: absolute; width: 100%; height: auto;" src=""></c:otherwise>
			</c:choose>
			<c:if test="${follow eq 'me'}">
				<span class="coverImageUploadMessage fp-update"><i class="fa fa-camera fa-2x"></i><br><spring:message code="profile.add_cover"/></span>
				<button id="coverImageDelete" type="button" class="image-delete-btn" style="" title="<spring:message code="profile.remove_cover"/>"><i class="ion-close-round"></i></button>
				<input type="file" id="upLoadCoverImage" class="fp-update" name="upLoadCoverImage" onchange="profileImageUpload(this, 'cover')" accept="image/*">
				<img id="movie-upLoadCoverImage" class="fp-update" src="">
			</c:if>
			<div class="mobile-display-website"><a href="${member.website}" target="_blank">${member.website}</a></div>
			<c:if test="${member.follow_accept != 0}">
				<c:if test="${follow eq 'following'}">
					<button type="button" class="mobile-follow-btn" style="display: none;" data-state="following" onclick="follow(this, 'mobile')"><i class="fa fa-check"></i>&nbsp;<i class="glyphicon glyphicon-user"></i></button>
				</c:if>
				<c:if test="${follow eq 'unFollow'}">
					<button type="button" class="mobile-follow-btn" style="display: none;" data-state="follow" onclick="follow(this, 'mobile')"><i class="fa fa-plus"></i>&nbsp;<i class="glyphicon glyphicon-user"></i></button>
				</c:if>
			</c:if>
			<div id="coverUploadMessage" class="popover top" style="display: none;position: absolute;top:70px;left:50%; z-index:120; max-width:300px; margin-left:-150px;"><div class="arrow"></div><h3 class="popover-title" style="display: none;"></h3><div style="padding:9px 14px;"><spring:message code="profile.move_cover"/></div></div>			
		</div>
		<div id="post-cover"></div>
	</div>
	<div class="container profileWrapper">
		<div id="profile-info">
			<div class="profile-image-wrapper" title="${member.name}" data-toggle="tooltip" style="cursor: pointer;">
				<c:if test="${follow eq 'me'}">
				<input type="file" id="upLoadProfileImage" class="fp-update" name="upLoadProfileImage" onchange="profileImageUpload(this, 'profile')" accept="image/*">
				<span class="profileImageUploadMessage fp-update"><i class="fa fa-camera" style="font-size: 28px;"></i><br><spring:message code="profile.add_profile"/></span>
				<button id="profileImageDelete" class="image-delete-btn" type="button" title="프로필이미지 삭제"><i class="ion-close-round"></i></button>
				</c:if>
				<a href="/resources/upload/profile/${member.profileImage}" rel="gallery" id="profile-imageViewer">
					<c:set value="${member.profileImage_top}px" var="top2"/>
					<img id="movie-upLoadProfileImage" class="fp-update" style="width: 170px; height: auto;" src="">
					<img id="profileImage" src="/resources/upload/profile/thumbnail/${member.profileImage}" alt="${member.name}" style="top:${top2};">
				</a>
			</div>
			<div class="profile-name-wrapper fp-display">
				<p><a href="/${member.id}" id="print_name">${member.name}</a><small><a href="/${member.id}" style="color:#fff;display:none;">@${member.id}</a></small></p>
				<p id="print_description">${member.description}</p>
			</div>
			<div class="fp-display">
				<div class="fp-button">
					<c:if test="${follow ne 'me'}">
						<c:if test="${member.follow_accept != 0}">
							<c:if test="${follow eq 'following'}">
								<button type="button" class="btn btn-success btn-sm" id="followBtn" data-state="following" onclick="follow(this, 'pc')" title="<spring:message code="common.following"/>" style="width:80px;"><i class='fa fa-check'></i>&nbsp;<spring:message code="common.following"/></button>
							</c:if>
							<c:if test="${follow eq 'unFollow'}">
								<button type="button" class="btn btn-primary btn-sm" id="followBtn" data-state="follow" onclick="follow(this, 'pc')" title="<spring:message code="common.follow"/>" style="width:80px;"><spring:message code="common.follow"/></button>
							</c:if>
						</c:if>
						<c:if test="${member.follow_accept == 0}">
							<div title="팔로우를 받지 않는 사용자입니다" data-toggle="tooltip" style="float: left; margin-right: 5px;"><button type="button" class="btn btn-primary btn-sm" id="followBtn" disabled="disabled" style="width:80px;"><spring:message code="common.follow"/></button></div>
						</c:if>
						<button type="button" id="message-btn" class="btn btn-default btn-sm" style="width:33px;" onclick="loadMessage()" title="<spring:message code="head.message"/>"><i class="icon ion-email" style="left:9px;"></i></button>
					</c:if>
					<button type="button" id="page-share-btn" class="btn btn-default btn-sm" style="width:33px;" data-toggle="modal" data-target="#page-share-modal" title="<spring:message code="common.share"/>"><i class="icon ion-share"></i></button>
				</div>
				<p class="print-location"><i class="fa fa-map-marker" style="color: #4E5665; font-size:15px; margin-right: 6px;"></i><span id="print_location">${member.location}<c:if test="${not empty member.location}">, </c:if></span>${member.country}</p>
				<p id="print_website"></p>
				<ul class="link-sns">
				<c:if test="${!empty member.link_facebook and member.link_facebook ne null}">
					<li><a href="http://facebook.com/${member.link_facebook}" title="Facebook" target="_blank"><img src="/resources/img/icon/share-facebook-icon.png">&nbsp;Facebook</a></li>
				</c:if>
				<c:if test="${!empty member.link_instagram and member.link_instagram ne null}">
					<li><a href="http://instagram.com/${member.link_instagram}" title="Instagram" target="_blank"><img src="/resources/img/instagram-icon.png">&nbsp;Instagram</a></li>
				</c:if>
				<c:if test="${!empty member.link_twitter and member.link_twitter ne null}">
					<li><a href="http://twitter.com/${member.link_twitter}" title="Twitter" target="_blank"><img src="/resources/img/icon/share-twitter-icon.png">&nbsp;Twitter</a></li>
				</c:if>
				</ul>
			</div>
			<c:if test="${follow eq 'me'}">
			<div class="fp-update fp-update-input">
				<input type="text" id="inputName" name="inputName" class="form-control" value="${member.name}" placeholder="<spring:message code="profile.name"/>" maxlength="20">
				<textarea id="inputDescription" name="inputDescription" rows="4" class="form-control" placeholder="<spring:message code="profile.description"/>" maxlength="100">${member.description}</textarea>
				<input type="text" id="inputLocation" name="inputLocation" class="form-control" value="${member.location}" placeholder="<spring:message code="profile.location"/>" maxlength="20">			
				<input type="text" id="inputWebsite" name="inputWebsite" class="form-control" value="${member.website}" placeholder="<spring:message code="profile.web"/>" maxlength="40">
				<div style="width:100%; height: 45px;" title="<spring:message code="profile.layout_color"/>">
					<span style="position: absolute; left:5px; padding-top: 5px; z-index: 2; color: #fff;pointer-events:none;"><spring:message code="profile.layout_color"/></span>
					<input type="hidden" id="inputLayoutColor" name="inputLayoutColor" class="form-control" value="${member.layoutColor}" maxlength="7">
				</div>
				<input type="hidden" id="inputCoverImage_top" name="inputCoverImage_top" value="${member.coverImage_top}">
				<input type="hidden" id="inputprofileImage_top" name="inputprofileImage_top" value="${member.profileImage_top}">
				<input type="hidden" id="delCoverImage" name="delCoverImage" value="false">
				<input type="hidden" id="delProfileImage" name="delProfileImage" value="false">
			</div>
			</c:if>
		</div>
	</div>
</form>
<input type="hidden" id="hasProfileImage" name="hasProfileImage" value="">
<input type="hidden" id="prevColor" name="prevColor" value="${member.layoutColor}">
<div class="profile-header">
	<ul class="profile-nav">
		<li title="${postCnt} <spring:message code="profile.post"/>" data-toggle="tooltip">
			<a href="/${member.id}">
				<span class="profile-nav-title"><spring:message code="profile.post"/></span>
				<span class="profile-value">${postCnt}</span>
			</a>
		</li>
		<li title=" ${followingCnt} <spring:message code="profile.following"/>" data-toggle="tooltip" class="active">
			<a href="/${member.id}/following">
				<span class="profile-nav-title"><spring:message code="profile.following"/></span>
				<span class="profile-value" id="following_cnt">${followingCnt}</span>
			</a>
		</li>
		<li title="${followerCnt} <spring:message code="profile.followers"/>" data-toggle="tooltip">
			<a href="/${member.id}/followers">
				<span class="profile-nav-title"><spring:message code="profile.followers"/></span>
				<span class="profile-value" id="follower_cnt">${followerCnt}</span>
			</a>
		</li>
		<li title="${likeCnt} <spring:message code="profile.favorites"/>" data-toggle="tooltip">
			<a href="/${member.id}/like">
				<span class="profile-nav-title"><spring:message code="profile.favorites"/></span>
				<span class="profile-value">${likeCnt}</span>
			</a>
		</li>
	</ul>
	<c:if test="${follow eq 'me'}">
	<ul class="profile-config">
		<li class="fp-display"><button type="button" class="btn btn-default" onclick="profile_update()" title="<spring:message code="profile.edit"/>"><i class='fa fa-cog' style="color: #575757;"></i>&nbsp;<spring:message code="profile.edit"/></button></li>
		<li class="fp-update" style="display: none;">
			<button type="button" class="btn btn-success" onclick="profile_save(this)" title="<spring:message code="profile.save"/>"><spring:message code="profile.save"/></button>
			<button type="button" class="btn btn-default" onclick="profile_cancel()" title="<spring:message code="profile.cancel"/>"><spring:message code="profile.cancel"/></button>
		</li>
	</ul>
	</c:if>
</div>
<div class="container profile-content">
	<div class="content-wrapper">
		<div id="followingList"></div>
		<div id="loadingAjaxImg" style="text-align:center; display: none; margin-top:20px;"><img src="/resources/img/loading-25x25-gray.gif" /></div>
	</div>
</div>

<div id="profile-update-overlay" style="width: 100%; height: 100%; position: fixed; background-color: #fff; top:0; z-index: 10; opacity: .8; -ms-filter: 'alpha(opacity=80)'; display: none; "></div>
<!-- footer -->
<%-- <jsp:include page = "footer.jsp" flush="false"/> --%>
<!-- footer -->
<!-- message modal -->
<div class="modal fade" id="message-modal" tabindex="-1" role="dialog" aria-hidden="true">
	<div class="modal-dialog" style="max-width: 550px;">
		<div class="modal-content">
			<form id="message-form" method="post">
			<input type="hidden" id="member_two" name="member_two" value="${member.idx}">
			<input type="hidden" id="send" name="send" value="new">
			<div class="modal-header" style="border-bottom:0;padding-bottom:0;">
		        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="font-size: 28px;">×</button>
		        <h4 class="modal-title">메시지</h4>
			</div>
			<div class="modal-body">
				<div class="form-group">
					<label>받는사람</label>
					<p class="form-control-static">${member.id}</p>
				</div>
				<div class="form-group">
					<label for="reply">내용</label><span id="reply-length" style="margin-left:15px; font-size: 12px; color: #ccc;">0</span><span style="font-size: 12px; color: #ccc;">/1000</span>
					<textarea id="reply" name="reply" class="form-control" rows="4" maxlength="1000" style="resize:vertical;" onkeyup="remainMessage()"></textarea>
				</div>
			</div>
			<div class="modal-footer" style="border-top:0;margin-top:0;padding:0 15px 15px 15px;">
				<button type="button" class="btn btn-success" onclick="sendMessage()">전송</button>
			</div>
			</form>
		</div>
	</div>
</div>
<!-- message modal -->
<!-- page share modal -->
<div class="modal fade" id="page-share-modal" tabindex="-1" role="dialog" aria-hidden="true">
	<div class="modal-dialog" style="max-width: 350px;">
		<div class="modal-content">
			<form id="report_form" method="post">
			<input type="hidden" id="report-category" name="report-category">
			<div class="modal-header" style="border-bottom:0;padding-bottom:0;">
		        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="font-size: 28px;">×</button>
		        <h4>공유하기</h4>
			</div>
			<div class="modal-body">
				<p>공유할 사이트를 선택 :</p> 
				<ul class="list-inline share-list">
					<li onclick="fb_page_share()" title="페이스북으로 공유하기" style="cursor: pointer;"><img src="/resources/img/icon/share-facebook-icon.png" width="32px" height="32px"></a></li>
					<li onclick="javascript:window.open('https://twitter.com/intent/tweet?text=View on %23Faeple http://faeple.com/${member.id}','트위터로 공유하기', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=260,width=600');" title="트위터로 공유하기" style="cursor: pointer;"><img src="/resources/img/icon/share-twitter-icon.png" width="32px" height="32px"></li>
					<li><a title="구글플러스로 공유하기" href="https://plus.google.com/share?url=http://faeple.com/${member.id}" onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" style="display: block;"><img src="/resources/img/icon/share-googleplus-icon.png" width="32px" height="32px"></a></li>
					<li><a href="mailto:?subject=View on Faple - ${member.name}&body=http://faeple.com/${member.id}" target="_blank" title="이메일로 공유하기"><img src="/resources/img/icon/share-email-icon.png" width="32px" height="32px"></a>
				</ul>
				<div>
					<p>또는 페이지 링크 복사</p>
					<input type="text" class="form-control" readonly="readonly" value="http://faeple.com/${member.id}" onclick="this.select();" style="background-color: #fff; cursor: text;">
				</div>
			</div>
			</form>
		</div>
	</div>
</div>
<!-- page share modal -->
</div><!-- end page -->
<%@ include file="commonScript.jsp" %>
</div><!-- end viewport -->
<script type="text/javascript" src="/resources/fancyBox/source/jquery.fancybox.js?v=2.1.5"></script>
<script src="/resources/js/jquery.minicolors.min.js"></script>
<script src="/resources/js/jquery.form.js"></script>
<script src="/resources/js/masonry.pkgd.min.js"></script>
<script src="/resources/js/imagesloaded.js"></script>
<script type="text/javascript">
    var index = 0;
    var profile_top;
    var hasPost = true;
    var is_mobile = isMobile();
    var loading = true;
    
    var member_idx = "${userDto.idx}";
	var member_id = "${userDto.id}";
	var member_name = "${userDto.name}";
	var member_profile = "${userDto.profileImage}";
	    
	function follow(obj, app) {
        if(member_idx == ""){
            $("#login-dialog").modal("show");
        }else{
        	var type = $(obj).data("state");
            var data = "following_idx=" + "${member.idx}";
            if(type == "follow"){
            	if(app == "pc") $(obj).html("<img src='/resources/img/primary-btn-loading.gif'>");
            	setTimeout(function(){
            		$.ajax({
                        type: "post",
                        url: "/follow",
                        data: data,
                        dataType: "text",
                        timeout: 5000,
                        error: function () {
                            alertShow("", "다시 시도해주세요", 2000);
                            if(app == "pc") $(obj).html("팔로우");
                        },
                        success: function(response){
                            if (response == "success") {
                            	if(app == "pc"){
                            		$(obj).removeClass("btn-primary").addClass("btn-success").html("<i class='fa fa-check'></i>&nbsp;팔로잉").data("state", "following");	
                            	}else{
                            		$(obj).data("state", "following").html("<i class='fa fa-check'></i>&nbsp;<i class='glyphicon glyphicon-user'></i>");
                            	}
                                $("#follower_cnt").html(parseInt($("#follower_cnt").html()) + 1);
                            } else if (response == "closed") {
                                alertShow("", "팔로우를 받지 않는 사용자입니다", 2000);
                            } else if (response == "role") {
                                alertShow("", "로그인이 필요합니다", 2000);
                            } else {
                                alertShow("", "다시 시도해주세요", 2000);
                            }
                        }
                    });
            	},600);
            }else{
            	if(app == "pc") $(obj).html("<img src='/resources/img/success-btn-loading.gif'>").data("state","follow");
            	setTimeout(function(){
            		$.ajax({
                        type: "post",
                        url: "/unFollow",
                        data: data,
                        dataType: "text",
                        timeout: 5000,
                        error: function () {
                            alertShow("", "다시 시도해주세요", 2000);
                            if(app == "pc") $(obj).html("<i class='fa fa-check'></i>&nbsp;팔로잉");
                        },
                        success: function(response){
                            if(response == "fail") {
                                alertShow("", "다시 시도해주세요", 2000);
                                if(app == "pc") $(obj).html("<i class='fa fa-check'></i>&nbsp;팔로잉");
                            }else{
                            	if(app == "pc"){
                            		$(obj).removeClass("btn-success").addClass("btn-primary").html("팔로우");
                            	}else{
                            		$(obj).data("state", "follow").html("<i class='fa fa-plus'></i>&nbsp;<i class='glyphicon glyphicon-user'></i>");
                            	}
                                
                                $("#follower_cnt").html(parseInt($("#follower_cnt").html()) - 1);
                            }
                        }
                    });
            	},600);
            }
        }
    }
    
    $(window).scroll(function () {
    	var width = $(window).innerWidth();
        if(width > 1200) {
        	var scroll = $(window).scrollTop();
        	if(scroll > profile_top){
        		$("#profile-info").css({"top":33,"position":"fixed"});
        	}else{
        		$("#profile-info").css({"top":-230,"position":"absolute"});
        	}
        	if(scroll > 210){
        		$("#profile-info").addClass("scroll");
        	}else{
        		$("#profile-info").removeClass("scroll");
        	}
        }
        if(hasPost && loading){
        	if($(window).scrollTop() > ($(document).height()-$(window).height()-350)){
        		NProgress.set(0.0);
    			index += 50;
    			getFollowingProfile();
       		}
   		}
    });
    
    $(window).resize(function(){
    	var coverImage = $("#coverImage");
    	var coverImageWrapper = $("div.coverImageWrapper");
    	coverImage.css("top", (coverImage.height()-coverImageWrapper.height())*parseInt("${member.coverImage_top}")/100);
    	coverImageWrapper.bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
    		coverImage.css("top", (coverImage.height()-coverImageWrapper.height())*parseInt("${member.coverImage_top}")/100);
       	});
    });
    
    $(function () {
    	imagesLoaded("#coverImage", function( instance ) {
    		$("#coverImage").css("top", ($("#coverImage").height()-$("div.coverImageWrapper").height())*parseInt("${member.coverImage_top}")/100);
		});
    	profile_top = $("#profile-info").offset().top-30;
    	getFollowingProfile();
    	$("#moblie-login-btn").css("right", 40);
        var pfCheck = /^default/i;
        if(pfCheck.test("${member.profileImage}")){
        	$("#hasProfileImage").val("false");
        }else{
        	$("#hasProfileImage").val("true");
        }
        
        $('[data-toggle="tooltip"]').tooltip({
            'placement': 'top',
            'container': 'body',
            'trigger': "hover"
        });
        $("#profile-imageViewer").fancybox({
            padding: 0,
            "type": "image"
        });
        
        if("${member.website}" != "") $("#print_website").html("<i class='ion-link' style='color: #494D56; font-size:19px;'></i>&nbsp;<a href='${member.website}' style='color:#808080; font-size:13px;' target='_blank'>${member.website}</a>");
        
        imagesLoaded("#profileImage", function( instance ) {
        	if ($("#profileImage").height() <= 170) {
            	if($(window).innerWidth() > 767){
            		$("#profileImage").css("height", 170);
            	}else{
            		$("#profileImage").css("top", 0);
            	}
            }
        });
        
        $("#followBtn").hover(function(){
        	if($(this).data("state") == "following"){
        		$(this).html("언팔로우");
        	}
        },function(){
        	if($(this).data("state") == "following"){
        		$(this).html("<i class='fa fa-check'></i>&nbsp;팔로잉");
        	}
        });
        
        $("#report-type").selectpicker();
        $(".mobile-footer-menu > ul > li:nth(4)").addClass("mf_on");
    });
    
    function getFollowingProfile() {
    	loading = false;
        var data = "index=" + index + "&idx=${member.idx}";
        $.ajax({
            type: "get",
            url: "/getFollowingProfile",
            data: data,
            dataType: "json",
            timeout: 5000,
            error: function () {
                $("#followingList").append("<div style='text-align:center;'><p><i class='glyphicon glyphicon-remove' style='font-size:44px; color: #a2a2a2; text-shadow: 1px 1px 0px rgba(201,201,201,1);'></i><h5>서버문제로 팔로잉 목록을 불러올 수 없습니다</h5><button onclick='location.reload(true)' class='btn btn-default btn-sm'>다시시도</button></div>");
            },
            success: function (response) {
                if(response == "" && index == 0) {
                	hasPost = false;
                    if(member_idx == "${member.idx}"){
                        $("#followingList").html("<div style='text-align:center; padding:30px 0;'><i class='ion-person-stalker' style='font-size:50px; color: #7a7a7a;'></i><h4 style='font-weight: bold; color:#777; text-shadow:0 1px 1px rgba(255,255,255,.8);'>회원님이 팔로잉하는 사람들</h4><h5 style='margin-top:25px;color:#999; text-shadow:0 1px 1px rgba(255,255,255,.8);font-weight:bold;'>이곳은 회원님이 팔로잉하는 사람들의 목록이 표시되는 공간입니다.<br>팔로잉 할 사람들을 찾아보고 소통을 나누어 보세요</h5><a href='/all' class='btn btn-mint'>사용자 찾기</a></div>");
                    }else{
                        $("#followingList").html("<div style='text-align: center; margin-bottom: 25px;'><p><i class='fa fa-search-minus' style='font-size:45px; color: #7a7a7a;'></i></p><h4 style='font-weight: bold; color:#3A404C;'>팔로잉 없음</h4></div>");
                    }
                }else{
                	if(response.length < 40) {
                		hasPost = false;
                	}
                    if (response != "") {
                        for (var i = 0; i < response.length; i++) {
                        	var description = response[i].description;
                        	var html ="<div class='profileBox'>";
							html += "<div class='pb-profile-image' title='"+response[i].name+"' data-toggle='tooltip'><a href='/"+response[i].id+"'><img src='/resources/upload/profile/thumbnail/"+response[i].profileImage+"'></a></div>";
							html += "<div class='pb-profile-name'><span><a href='/"+response[i].id+"'>"+response[i].name+"</a></span><br><span><a href='/"+response[i].id+"' class='pb-profile-id'>@"+response[i].id+"</a></span></div>";
							html += "<div class='pb-profile-info'><span class='pb-followers' title='"+response[i].followerCnt+" 팔로워'><i class='glyphicon glyphicon-user'><i class='glyphicon glyphicon-user'></i></i><span>"+response[i].followerCnt+"</span></span><span class='pb-post' title='"+response[i].postCnt+" 포스트'><i class='glyphicon glyphicon-picture'></i><span>"+response[i].postCnt+"</span></span></div>";
							if(response[i].description == null || response[i].description == ""){ description = " "; }
							html += "<div class='pb-profile-description'>"+description+"</div>";
							html += "<div style='padding: 10px 5px;'>";
                            if(response[i].followState == "unFollow"){
                            	html += "<button type='button' class='btn btn-default btn-sm btn-block' onclick='profile_follow(this, \"follow\", "+response[i].idx+");'>팔로우</button></div>";
                            }else if(response[i].followState == "following"){
                            	html += "<button type='button' class='btn btn-success btn-sm btn-block' onclick='profile_follow(this, \"unfollow\", "+response[i].idx+");'><i class='fa fa-check'></i>&nbsp;팔로잉</button></div>";
                            }else{
                            	html += "</div>";
                            }
                            html += "</div>";
 			    			$("#followingList").append(html);
                        }
                    }else{
                        $("#followingList").append("<div class='clear'></div>");
                        $("#lastDataDis").show();
                        hasPost = false;
                    }
                }
                $('[data-toggle="tooltip"]').tooltip({
                    'placement': 'top',
                    'container': 'body',
                    'trigger': "hover"
                });
            },
            beforeSend: function () {
            	$("#ajax-spinner").show();
            },
            complete: function () {
            	$("#ajax-spinner").hide();
		    	loading = true;
            }
        });
    }
    
    function coverImage(img,top){
    	$(img).css("top", ($(img).height()-90)*top/100);
    }
    
    function profile_follow(obj, type, idx) {
        if (member_idx == "") {
            $("#login-dialog").modal("show");
        } else {
            var data = "following_idx="+idx;
            if (type == "follow") {
            	$(obj).html("<img src='/resources/img/primary-btn-loading.gif'>");
            	setTimeout(function(){
            		$.ajax({
	                    type: "post",
	                    url: "/follow",
	                    data: data,
	                    dataType: "text",
	                    timeout: 5000,
	                    error: function () {
	                        alertShow("", "다시 시도해주세요", 2000);
	                    },
	                    success: function (response) {
	                        if (response == "success") {
	                            $(obj).removeClass("btn-primary").addClass("btn-success").html("<i class='fa fa-check'></i>&nbsp;팔로잉").attr("onclick", "profile_follow(this, 'unfollow', "+idx+");").hide().fadeIn();
	                            $("#following_cnt").html(parseInt($("#following_cnt").html()) + 1);
	                        } else if (response == "closed") {
	                            alertShow("", "팔로우를 받지 않는 사용자입니다", 2000);
	                        } else if (response == "role") {
	                            alertShow("", "로그인이 필요합니다", 2000);
	                        } else {
	                            alertShow("", "다시 시도해주세요", 2000);
	                        }
	                    },
	                    complete: function(){
	                    	
	                    }
	                });
            	}, 1000);
                
            } else {
            	$(obj).html("<img src='/resources/img/success-btn-loading.gif'>");
            	setTimeout(function(){
            		$.ajax({
	                    type: "post",
	                    url: "/unFollow",
	                    data: data,
	                    dataType: "text",
	                    timeout: 5000,
	                    error: function () {
	                        alertShow("", "다시 시도해주세요", 2000);
	                    },
	                    success: function (response) {
	                        if (response == "fail") {
	                            alertShow("", "다시 시도해주세요", 2000);
	                        } else {
	                            $(obj).removeAttr("data-state").removeClass("btn-success").addClass("btn-primary").attr("onclick", "profile_follow(this, 'follow', "+idx+");").html("팔로우").hide().fadeIn();
	                            $("#following_cnt").html(parseInt($("#following_cnt").html()) - 1);
	                        }
	                    }
	                });
            	}, 1000);
            }
        }
    }
    
    function loadMessage(){
   		if("${userDto.idx}" != ""){
   			$("#message-modal").modal("show");
   		}else{
   			$("#login-dialog").modal("show");
   		}
   	}
    
	function sendMessage(){
		if("${userDto.idx}" != ""){
			var data = $("#message-form").serialize();
			$.ajax({
				type : "post"
   	   		    , url : "/sendMessage"
   	   		    , data : data
   	   		    , dataType : "text"
   	   		    , timeout : 5000
   	   		    , error : function() {
   	   		    	alertShow("","다시 시도해 주세요", 2000);
   	   		    }
   	   		    , success : function(response) {
   	   		    	if(response == "execute"){
   	   		    		$("#message-modal").modal("hide");
   	   		    		alertShow("success","전송되었습니다", 2000);
   	   		    		$("#message-form").each(function(){
   	   		    			this.reset();
   	   		    		});
   	   		    	}else{
   	   		    		alertShow("","다시 시도해 주세요", 2000);
   	   		    	}
   	   		    }
   	   		});
   		}else{
   			alertShow("","로그인이 필요합니다", 2000);
   		}
   	}
   	
   	function remainMessage(){
   		var size = $("#reply").val().length;
   		if(size > 970){
   			$("#content-length").css("color","#FF0000");
   		}else{
   			$("#content-length").css("color","#ccc");
   		}
   		$("#reply-length").html(size);
   	}
   	
    function fb_page_share(content, title, url, image1){
   		var obj = {
   			method: "feed",
   			link: "http://faeple.com/${member.id}",
   			picture: "http://faeple.com/resources/upload/profile/thumbnail/${member.profileImage}",
   			name: "Faeple on ${member.name}",
   			caption: location.href,
   			description: "${fn:replace(member.description, newLineChar, ' ')}"
   		};
   		
   		function callback(response){
   			if(response && response.post_id){
   				alert('페이스북에 공유되었습니다');
   				$("#page-share-modal").modal("hide");
   			}
   		}
   		FB.ui(obj, callback);
   	}
</script>
<c:if test="${userDto.idx eq member.idx}">
<script src="/resources/js/memberView.js"></script>
</c:if>
<div class="modal" id="post-modal" style="cursor:-webkit-zoom-out;">
	<button type="button" class="close" id="post-modal-close" title="닫기"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
	<div style="max-width: 990px; margin: 25px auto; padding: 0; cursor: default;">
		<div id="post-viewer"></div>
	</div>
</div><!-- /.modal-dialog -->
<div class="modal-backdrop in" id="post-backdrop" style="display: none; filter: alpha(opacity=85); opacity: .85; background-color: #d0d0d0;"></div>
<script type="text/javascript" src="/resources/js/postModal.js?20150424"></script>
</body>
</html>